<template>
  <div>
    <child-component>
      <template slot-scope="props">
        <p>来自父组件的内容</p>
        <p>{{props.msg}}</p>
      </template>
    </child-component>

    <my-list :books="books">
      <template slot="book" slot-scope="props">
        <li>{{props.bookName}}</li>
      </template>
    </my-list>
  </div>
</template>
<script>
export default {
  data(){
    return{
      books:[
        { name: '《Vue.js 实战》'},
        { name: '《JavaScript 语言精辟》'},
        { name: '《JavaScript 高级程序设计》'}
      ]
    }
  },
  components:{
    'child-component':{
      template: `
        <div class="container">
          <slot msg="来自子组件的内容"></slot>
        </div>
      `,
      data(){
        return{
          message: '子组件内容'
        }
      }
    },
    'my-list':{
      props:{
        books:{
          type: Array,
          default: function(){
            return [];
          }
        },
      },
      template:`
        <ul>
          <slot name="book" v-for="book in books" :book-name="book.name">
          <!--这里也可以写默认slot 内容-->
          </slot>
        </ul>
      `
    }
  }
}
</script>
<style scoped>
.container{
  border: 1px solid #ccc;
}
</style>


